<template>
  <div class="menuList">
    <el-tabs type="border-card">
      <el-tab-pane label="制作视频">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left">
            <div style="float:left">
              <i class="el-icon-video-camera-solid"></i>
              <span>学院视屏</span>
            </div>
            <el-button type="success" plain style="float:right" @click="openCollege">添加制作</el-button>
          </div>
          <div class="listB">
            <div class="block" v-for="item of collegeList" :key="item.index" @click="lookWk(item.wk_id)">
              <el-image :src="item.wk_pic" width="100" style="width: 276px;display: block;height: 184px;">
                <div slot="placeholder" class="image-slot">
                  加载中
                  <span class="dot">...</span>
                </div>
              </el-image>
              <p class="demonstration">
                <b style="width:178px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="item.wk_name">{{item.wk_name}}</b>
                <span>{{item.wk_create_time}}</span>
              </p>
              <p class="demonstration" @click.stop>
                <el-button type="text" style="color:green;" @click="lookWk(item.wk_id)">查看</el-button>
                <el-button type="text" style="color:red;" @click="delWk(item.wk_id)">删除</el-button>
              </p>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :visible.sync="centerDialogVisible"
      :before-close="closeCPediet"
      width="40%"
      center
      :closeOnClickModal="false"
      title="添加学院制作视频"
    >
      <el-form
        :model="collegeFrom"
        ref="collegeFrom"
        label-width="100px"
        class="demo-ruleForm"
        style="width:95%"
      >
        <el-form-item label="微课名称" prop="wkName">
          <el-input v-model="collegeFrom.wkName"></el-input>
        </el-form-item>

        <el-form-item label="微课封面">
          <input type="file" accept="image/*" ref="file" @change="picChange($event)" />
        </el-form-item>
        <el-form-item label="微课视频">
          <input type="file" ref="file" @change="videoChange($event)" />
        </el-form-item>
        <el-form-item label="微课简介" prop="wkIntro">
          <el-input type="textarea" v-model="collegeFrom.wkIntro"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: -100px!important;display: flex;justify-content: center;">
          <el-button type="primary" @click="addCollege">立即添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="detailCollage.wk_name"
      :visible.sync="disPlay"
      width="50%"
      center
      :before-close="closeDetail"
    >
      <div class="evamine">
        <p>
          微课名称：
          <b>{{detailCollage.wk_name}}</b>
          ——
          <b style="color:blue">{{detailCollage.category_name}}</b> 类
        </p>
        <p>
          <video :src="detailCollage.wk_video_adress" controls id="a1_html5_api" preload="auto"></video>
        </p>
        <p style="text-indent:2em;">{{detailCollage.wk_introduce}}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collegeList: [], //学院
      centerDialogVisible: false,
      disPlay: false,
      collegeFrom: { wkName: "", wkIntro: "" },
      collegeId: "",
      user: {},
      picFile: {},
      videoFile: {},
      detailCollage: {},
      dynamicTags:null
    };
  },
  mounted() {
    this.user = JSON.parse(this.$cookie.get("userAdmin"));
    this.getCollege();
    this.getCategorylist();
  },
  methods: {
     //类别列表
    getCategorylist() {
      var that = this;
      that.$axios
        .get("apis/admin/categorylist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              console.log(res.data.data);
              let datalist = res.data.data;
              that.dynamicTags = res.data.data;
              for(var i =  0 ;i<datalist.length;i++){
                if( datalist[i].category_name == "学院制作"){
                  that.collegeId =datalist[i].category_id
                }
              }
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //微课列表 ————学院制作
    getCollege() {
      var that = this;
      that.$axios
        .get("apis/admin/wklist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataLiat = res.data.data;
              var college = [];
              for (var i = 0; i < dataLiat.length; i++) {
                dataLiat[i].wk_create_time = that
                  .$moment(dataLiat[i].wk_create_time)
                  .format("YYYY-MM-DD");
                if (dataLiat[i].category_name == "学院制作") {
                  college.push(dataLiat[i]);
                  that.collegeId = dataLiat[i].category_id;
                }
              }
              that.collegeList = college;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //添加 上传微课制作视频
    openCollege() {
      var that = this;
      that.centerDialogVisible = true;
    },
    closeCPediet() {
      this.centerDialogVisible = false;
    },
    //上传视频
    addCollege() {
      var that = this;
      var parse = new FormData();
      parse.append("admin_id", that.user.admin_id);
      parse.append("categoryId", that.collegeId);
      parse.append("wkIntroduce", that.collegeFrom.wkIntro);
      parse.append("wkName", that.collegeFrom.wkName);
      parse.append("wkPic", that.picFile);
      parse.append("wkVideo", that.videoFile);
      console.log(parse)
       const loading = this.$loading({
        lock: true,
        text: "上传Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      that.$axios
        .post("apis/admin/uploadwkvideomessage", parse)
        .then(function(res) {
          if (res.status == 200) {
            loading.close();
            if (res.data.status == 1) {
              that.getCollege();
              that.centerDialogVisible = false;
              location.reload();
              that.$message({
                message: "上传成功~",
                type: "success"
              });
            } else {
              that.picFile = "";
              that.videoFile = "";
              that.collegeFrom = {};
              that.$message.error("错了哦，系统出错~");
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //获取图片对象文件
    picChange(e) {
      var that = this;
      that.picFile = e.target.files[0];
    },
    //获取图片对象文件
    videoChange(e) {
      var that = this;
      that.videoFile = e.target.files[0];
    },
    lookWk(id) {
      console.log(id);
      var that = this;
      that.disPlay = true;
      console.log("查看")
      that.$axios
        .post(
          "apis/admin/wklistdetail",
          this.$qs.stringify({
            wk_id: id //删除行的ID
          })
        )
        .then(function(res) {
           console.log(res.data.data.wk);
          if (res.status == 200) {
            that.detailCollage =res.data.data.wk
          }
        })
        .catch(function(error) {
          console.log(error);
        });
     
    },
    closeDetail() {
      var video = document.getElementById("a1_html5_api");
      video.pause(); //暂停控制
      this.disPlay = false;
    },
    //删除微课
    delWk(id) {
      console.log(id);
      var that = this;
      that.$axios
        .post(
          "apis/admin/delwk",
          this.$qs.stringify({
            wk_id: id //删除行的ID
          })
        )
        .then(function(res) {
          console.log(res);
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getCollege();
              that.$message({
                message: "删除成功哦~",
                type: "success"
              });
            }
            console.log(that.newsList);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.menuList {
  height: 810px;
  .el-card {
    width: 100% !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
  .listB {
    text-align: left;
    .block {
      width: 23%;
      display: inline-block;
      margin: 10px;
      .el-image {
        width: 100%;
      }
      .demonstration {
        display: flex;
        justify-content: space-between;
        line-height: 30px;
      }
    }
  }
  .evamine {
    width: 90%;
    margin: 0 auto;
    p {
      text-align: left;
      line-height: 40px;
      video {
        width: 100%;
      }
    }
    div {
      width: 40%;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
